{% extends 'base.html' %}
{% load static %}

{% block extrahead %}{{ block.super }}
<link rel="stylesheet" href="{% static 'order/css/order.css' %}">
{% endblock %}

{% block hero-body %}
<div class="container is-fluid1">
    <p class="title">
        立即下单
    </p>
    <p class="subtitle">
        商品数量有限，请及时支付！
    </p>
</div>
{% endblock %}

{% block section %}
<div class="container mt-4" id="buynow">
    {% if cart_product.message %}
    <article class="message is-danger">
        <div class="message-header">
            <p>发生错误了，该商品似乎不存在哦！</p>
            <button class="delete" aria-label="delete"></button>
        </div>
        <div class="message-body">
            {{ cart_product.message }}
        </div>
    </article>
    {% else %}

    <form action="" method="post">
        {% csrf_token %}
        <!-- 收货地址 -->
        <div class="card is-shadowless">
            <header class="card-header">
                <p class="card-header-title">
                    收货地址
                </p>
                <button class="card-header-icon" aria-label="more options">
                    <span class="icon">
                        <i class="fas fa-angle-down" aria-hidden="true"></i>
                    </span>
                </button>
            </header>
            <div class="card-content">
                {% comment %} {{ form.error_list }} {% endcomment %}
                <div class="address columns">
                    {% if address %}
                    {% for addr in address %}
                    <label class="column is-3">
                        <input type="radio" name="address" id="address_{{ addr.id }}" value="{{ addr.id }}" {% if addr.is_default %}checked{% endif %} hidden>
                        <div class="attr p-5">
                            {% if addr.is_default %}
                            <span class="tag is-primary">默认</span>
                            {% endif %}
                            {{ addr.signer_name }}{{ addr.signer_mobile }}
                            <p class="has-text-grey-dark">
                                {{ addr.province }}{{ addr.city }}{{ addr.district }}{{ addr.address }}
                            </p>
                        </div>
                    </label>
                    {% endfor %}
                    {% endif %} 
                    <!-- 添加收货地址 -->
                    <div class="column is-3">
                        <div class="box is-border has-text-grey-light has-text-centered is-shadowless" 
                            style="cursor: pointer;" @click="addAddressModal()">
                            <div class="is-medium pt-5 pb-5">
                                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                                    <path fill="currentColor" d="M13 20H13.09A5.5 5.5 0 0 0 13.81 22H9A2 2 0 0 1 11 20V12H3.5L6 9.5L3.5 7H11V3L12 2L13 3V7H18L20.5 9.5L18 12H13M18 15V18H15V20H18V23H20V20H23V18H20V15Z" />
                                </svg>
                                <span>添加收货地址</span>
                            </div>
                        </div>
                    </div>
                    <!-- end -->
                </div>
                

            </div>
        </div>

        <!-- 支付方式 -->
        <div class="card is-shadowless">
            <header class="card-header">
                <p class="card-header-title">
                    支付方式
                </p>
                <button class="card-header-icon" aria-label="more options">
                    <span class="icon">
                        <i class="fas fa-angle-down" aria-hidden="true"></i>
                    </span>
                </button>
            </header>
            <div class="card-content">
                <div>
                    {% for key, value in pay_method.items %}
                    <label class="mr-3 radio" {% if key != 2 %}disabled{% endif %}>
                        <input type="radio" name="pay_method" id="pay_method_{{ key }}" value="{{ key }}"  {% if key != 2 %}disabled{% endif %}  {% if pay_default == key %}checked{% endif %}>
                        {{ value }}
                    </label>
                    {% endfor %}
                </div>

            </div>
        </div>

        <div class="box is-shadowless has-background-white mt-4">
            <h1 class="is-size-5 mb-2">订单信息:</h1>
            <div class="box is-shadowless border">
                {% block level-payall %}
                <div class="level">
                    <div class="level-left">
                        <div class="level-item">
                            <figure class="image">
                                <img src="{{ MEDIA_URL }}{{ cart_product.spu.image }}" alt="" style="width: 100px;">
                            </figure>
                        </div>
                        <div class="level-item">
                            {{ cart_product.spu.title }} <br>
                            {% if cart_product.sku %}
                            {% for spec in cart_product.sku.specs.all %}
                            {{ spec.spec.name }}:
                            {{ spec.option }}
                            {% endfor %}
                            {% endif %}
                        </div>
                        
                    </div>
                    <div class="level-right">
                        <div class="level-item pr-6">
                            {% if cart_product.sku %}
                                {{ cart_product.num }}{{ cart_product.spu.product_unit }} x {{ cart_product.sku.shop_price }}
                            {% else %}
                                {{ cart_product.num }}{{ cart_product.spu.product_unit }} x {{ cart_product.spu.shop_price }}
                            {% endif %}
                        </div>
                        <div class="level-item pl-5">
                            <strong class="has-text-danger-dark is-size-5">{{ total_price }}</strong>
                        </div>
                    </div>
                </div>
                {% endblock %}
            </div>

            <div class="box has-text-right is-shadowless">
                <div class="columns">
                    <div class="column is-10">
                        <ul>
                            <li>
                            共{% block num %}{{ cart_product.num }}{% endblock %}件商品,总商品金额：</li>
                            <li>运费：</li>
                        </ul>
                    </div>
                    <div class="column">
                        <ul>
                            <li class=" has-text-right ">¥{% block total %}{{ total_price }}{% endblock %}</li>
                            <li class=" has-text-right ">¥{% block freight %}{{ freight }}{% endblock %}</li>
                        </ul>
                    </div>
                </div>

                <div class="columns has-background-light">
                    <div class="column is-10">
                        <label style="line-height: 2.5em;">应付总金额：</label>
                    </div>
                    <div class="column">
                        <span class="is-size-4 has-text-weight-bold has-text-danger-dark">
                            ¥{{ total }}
                        </span>
                    </div>
                </div>
            </div>

        </div>
        <b-field label="订单备注" :label-position="labelPosition">
            <b-input maxlength="200" type="textarea" placeholder="有特殊要求，请务必备注说明!" name="order_mark" id="id_order_mark">
            </b-input>
        </b-field>
        <input class="button is-primary is-pulled-right pl-6 pr-6" type="submit" value="提交订单">
        <div class="is-clearfix"></div>
    </form>
    <!-- 收货地址弹窗 -->
    <div class="modal" :class="{ 'is-active': active }">
        <div class="modal-background"></div>
        <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title">添加新地址</p>
            <button class="delete" aria-label="close" @click="closeAddressModal()"></button>
        </header>
        <section class="modal-card-body">
            <!-- Content ... -->
            <b-field label="省份" :label-position="labelPosition">
                <b-input v-model="province" required validation-message="不能为空!"></b-input>
            </b-field>
            <b-field label="城市" :label-position="labelPosition">
                <b-input v-model="city" required validation-message="不能为空!"></b-input>
            </b-field>
            <b-field label="区域" :label-position="labelPosition">
                <b-input v-model="district" required validation-message="不能为空!"></b-input>
            </b-field>
            <b-field label="详细地址" :label-position="labelPosition">
                <b-input v-model="address" required validation-message="不能为空!"></b-input>
            </b-field>
            <b-field label="签收人" :label-position="labelPosition">
                <b-input v-model="signer_name" required validation-message="不能为空!"></b-input>
            </b-field>
            <b-field label="手机号" :label-position="labelPosition">
                <b-input v-model="signer_mobile" maxlength=11 required validation-message="不能为空!"></b-input>
            </b-field>
            <b-field label="邮箱" :label-position="labelPosition">
                <b-input v-model="email" type="email" validation-message="请输入正确的邮箱格式！"></b-input>
            </b-field>
            <b-field :label-position="labelPosition">
                <b-checkbox v-model="is_default">是否设为默认</b-checkbox>
            </b-field>
        </section>
        <footer class="modal-card-foot">
            <button class="button is-success" @click="saveAddressModal()">保存</button>
            <button class="button" @click="closeAddressModal()">取消</button>
        </footer>
        </div>
    </div>
    {% endif %}
</div>

{% endblock %}


{% block extrafoot %}{{ block.super }}
<script src="{% static 'vue/common.js' %}"></script>
<script>
    var buynow = new Vue({
        el: "#buynow",
        delimiters: ['[[', ']]'],
        data: {
            // radio: '',
            labelPosition: 'on-border',
            // 添加收货地址
            active: false,
            // 表单数据绑定
            province: '',
            city: '',
            district:'',
            address:'',
            signer_name:'',
            signer_mobile: '',
            email:'',
            is_default:'',

        },
        methods: {
            addAddressModal(){
                this.active = true
            },
            closeAddressModal(){
                // 关闭modal并清空输入框
                this.active = false;
            },
            saveAddressModal(){
                // 保存地址
                let sendData = new URLSearchParams()
                sendData.append('province', this.province);
                sendData.append('city', this.city);
                sendData.append('district', this.district);
                sendData.append('address', this.address);
                sendData.append('signer_name', this.signer_name);
                sendData.append('signer_mobile', this.signer_mobile);
                sendData.append('email', this.email);
                sendData.append('is_default', this.is_default);
                let url = "/users/create/address/";
                axios.post(url, sendData, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': getCookie('csrftoken'),
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    }
                }).then(res => {
                    // this.closeAddressModal()
                    console.log(res.data)
                    this.active = false;
                    // window.location.reload();
                    if (res.data.status == 200 && res.data.code == 'ok') {
                        this.$buefy.toast.open({
                            duration: 2000,
                            message: res.data.message,
                            type: 'is-success'
                        });
                        setTimeout("window.location.reload()", 2000)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        }
    })
</script>
{% endblock %}